<template>
    <!-- 轮播图的组件 -->
    <el-carousel :interval="2000" type="card" height="300px" >
        <el-carousel-item>
            <img src="https://cdn.pixabay.com/photo/2020/01/26/20/14/computer-4795762_960_720.jpg" alt="">
        </el-carousel-item>
        <el-carousel-item>
            <img src="https://cdn.pixabay.com/photo/2017/07/10/23/45/cubes-2492010_960_720.jpg" alt="">
        </el-carousel-item>
        <el-carousel-item>
            <img src="https://cdn.pixabay.com/photo/2018/01/17/04/14/industry-3087393_960_720.jpg" alt="">
        </el-carousel-item>
        <el-carousel-item>
            <img src="https://cdn.pixabay.com/photo/2020/05/21/21/28/ai-5202865_960_720.jpg" alt="">
        </el-carousel-item>
        <el-carousel-item>
            <img src="https://cdn.pixabay.com/photo/2017/04/14/11/29/virtual-reality-2229924_960_720.jpg" alt="">
        </el-carousel-item>
        <!-- <el-carousel-item v-for="item in lbtImg.img" :key="item.id">
            <img :src="item.img" alt="">
        </el-carousel-item> -->
    </el-carousel>
</template>
<script>
import {Img} from '@/api/img.js'
import { onMounted, reactive } from 'vue'
export default {
    setup(){
        // 获取轮播图的图片
        const lbtImg = reactive({
            img:{},
        })
        // 渲染数据
        onMounted(()=>{
            Img().then((res)=>{
                const {data} = res
                lbtImg.img = data
            }).catch((err)=>{
                console.log(err);
            })
        })
    }
}
</script>
<style lang="less" scoped>
    img{
        height: 100%;
        width: 100%;
    }
</style>
